import styled from 'styled-components'
import Border from 'components/style/Border'


const listContainer = styled.div `
  &::before{
    top:-0.01rem !important;
  }
`

const CateContainer= Border(listContainer,'0.01rem 0 0 0','#666666',0)

const UlContainer = styled.ul`
  width:2.85rem;
  height:0.6rem;
  display:flex;
  justify-content:center;
  align-items:center;
  border:solid 0.01rem white;
  border-radius:0.3rem;
  margin: 0.1rem;
  position:relative;
  li {
    list-style:none;
    font-size:0.3rem;
    text-align:center;
    flex:1;
    z-index: 1;
    &.active{
      color: #ee7430;
    }
  }


  &::before {
    content:"";
    /* top:0; */
    left:0;
    position:absolute;
    background:white;
    border-radius:0.3rem;
    width:50%;
    height:100%;
    transition:all 0.3s;
  }

  &.left::before{
    transform:translateX(0%);
  }

  &.right::before{
    transform:translateX(101%);
  }


`

export {
  CateContainer,
  UlContainer
} 